<template>
  <div>
    <div class="i-layout-page-header">
      <div>
        <el-tabs class="badge" v-model="status_str" @tab-click="handleTabClick">
          <!-- <el-tab-pane
              v-for="(item , index) in tabs"
              :disabled="false"
              :label="item.label"
              :name="item.type"
              :key="index"
          />-->
          <el-tab-pane v-for="(item , index) in tabs" :key="index" :name="item.type">
            <template #label>
              <el-badge :value="tablists[item.type]||0" :max="99" type="primary">
                <span>{{item.label}}</span>
                <!-- <span class="badge">{{tablists[item.type]||0}}</span> -->
              </el-badge>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="orderFrom"
        :model="orderFrom"
        label-width="75px"
        label-position="right"
        @submit.native.prevent
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="订单搜索：" label-for="nickname">
              <el-input
                v-model="orderFrom.keywords"
                placeholder="请输入搜索关键字"
                element-id="nickname"
                clearable
                style="width: 300px"
              >
                <el-select v-model="orderFrom.fieldKey" slot="prepend" style="width: 100px">
                  <el-option value="all" label="全部"></el-option>
                  <el-option value="id" label="订单ID"></el-option>
                  <el-option value="ordersn" label="订单号"></el-option>
                  <el-option value="uid" label="用户UID"></el-option>
                  <el-option value="link_name" label="联系人"></el-option>
                  <el-option value="link_mobile" label="联系方式"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="服务项目：" label-for="item_id">
                <el-select
                  v-model="orderFrom.itemId"
                  placeholder="请选择"
                  element-id="type"
                  clearable
                  filterable
                  @change="selectType"
                  class="form_content_width"

                >
                  <el-option value="all" label="全部"></el-option>
                  <el-option
                    :value="item.id"
                    v-for="(item,index) in itemList"
                    :key="index"
                    :label="item.title"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务分类：" label-for="cateId">
                <el-select
                  v-model="orderFrom.cateId"
                  placeholder="请选择"
                  element-id="type"
                  clearable
                  filterable
                  @change="selectType"
                  class="form_content_width"
                >
                  <el-option value="all" label="全部"></el-option>
                  <el-option
                    :value="item.id"
                    v-for="(item,index) in cateList"
                    :key="index"
                    :label="item.ptitle+'>>>'+item.title"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购买类型：" label-for="cateId">
                <el-select
                  v-model="orderFrom.itemType"
                  placeholder="请选择"
                  element-id="type"
                  @change="selectType"
                  style="width: 110px;"
                >
                  <el-option value="all" label="全部"></el-option>
                  <el-option :value="1" label="普通服务"></el-option>
                  <el-option :value="2" label="次卡服务"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <template v-if="collapse">
              <el-col :span="8">
                <el-form-item label="支付方式：">
                  <el-radio-group v-model="orderFrom.payType" type="button" @change="orderSearchs">
                    <el-radio-button
                      v-for="item in payList"
                      :label="item.val"
                      :key="item.id"
                    >{{item.label}}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付状态：" label-for="paystatus">
                  <el-radio-group v-model="orderFrom.isPay" type="button" @change="orderSearchs">
                    <el-radio-button label>
                      <span>全部</span>
                    </el-radio-button>
                    <el-radio-button label="0">
                      <span>未提交</span>
                    </el-radio-button>
                    <el-radio-button label="1">
                      <span>已支付</span>
                    </el-radio-button>
                    <el-radio-button label="2">
                      <span>未支付</span>
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            <el-col :span="24">
              <el-col>
                <el-form-item label="时间选择：" label-for="user_time_type">
                  <el-select
                    v-model="orderFrom.timeKey"
                    placeholder="请选择访问情况"
                    element-id="user_time_type"
                    clearable
                  >
                    <el-option value="add_time" label="下单时间"></el-option>
                    <el-option value="pay_time" label="支付时间"></el-option>
                    <el-option value="book_time" label="预约时间"></el-option>
                    <el-option value="appoint_time" label="指派时间"></el-option>
                    <el-option value="finish_time" label="完成时间"></el-option>
                    <el-option value="cancel_time" label="取消时间"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="orderFrom.timeKey">
                <el-form-item label="时间：" label-for="time_type">
                  <el-date-picker
                    @change="onchangeTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="timeVal"
                    format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    class="mr20"
                    :picker-options="options"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-col>
          </template>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button
              type="primary"
              icon="ios-search"
              label="default"
              class="mr15"
              @click="orderSearchs"
            >搜索</el-button>
            <el-button class="ResetSearch" @click="reset('orderFrom')">重置</el-button>
            <a class="ivu-ml-8 font14 ml10" @click="collapse = !collapse">
              <template v-if="!collapse">
                展开
                <i type="ios-arrow-down" />
              </template>
              <template v-else>
                收起
                <i type="ios-arrow-up" />
              </template>
            </a>
          </el-form-item>
        </el-row>
      </el-form>

      <el-divider divided />
      <el-row type="flex" justify="space-between" class="mt20">
        <el-col :span="24" style="display: flex;">
          <el-button class="export" icon="ios-share-outline" @click="exports">导出</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="orderLists"
        :row-class-name="rowClassName"
        ref="table"
        @row-dblclick="handleDbclick"
        class="mt25"
        v-loading="loading"
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column type="expand" >
          <template slot-scope="props">
            <orderTableExpand :expand="props.row"></orderTableExpand>
          </template>
        </el-table-column>
        <el-table-column label="订单信息" min-width="150"  #default="{row}">
          <div>订单ID：{{row.id}}</div>
          <div>订单号：{{row.ordersn}}</div>
        </el-table-column>
        <el-table-column label="用户信息" min-width="200" #default="{row}">
          <div>用户UID：{{row.uid}}</div>
          <div>联系电话：{{row.linkMobile}}</div>
          <div>联系人：{{row.linkName}}</div>
          <div>用户地址：{{row.userAddress}}</div>
        </el-table-column>
        <el-table-column label="服务信息" min-width="200" #default="{row}">
          <div>服务项目：{{row.itemName}}</div>
          <div>购买类型：{{row.itemType == 1?'普通服务':'次卡服务'}}</div>
          <div>项目规格：{{row.itemSpecData.specName||''}}</div>
          <div v-if="row.itemType == 2">剩余次数：{{row.vipLeftTimes}}次</div>
          <div v-if="row.itemType == 2">截止时间：{{row.vipEndTimeDesc}}</div>

          <div v-if="row.itemType == 1 && row.status > 20">上门时间：{{row.signTimeDesc}}</div>
          <div v-if="row.payType == 'card'">次卡：{{row.vipOrdersn}}</div>
        </el-table-column>
        <el-table-column label="人员信息" min-width="150" #default="{row}">
          <template v-if="row.itemType == 1">
            <div v-if="row.companyId > 0">服务门店：{{row.company.title}}</div>
            <div v-if="row.serviceStaffId > 0">服务人员：{{row.staffData.title}}</div>
            <div v-if="row.agentId>0">代理名称：{{row.agent.linkName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="费用信息" min-width="150" #default="{row}">
          <div>应付金额：{{row.originalPrice}}</div>
          <div>实付金额：{{row.payPrice}}</div>
          <div v-if="row.status == 40 && row.itemType == 1">
            <div>服务酬劳：{{row.costFee||0.00}}</div>
            <div v-if="row.company_id">门店酬劳：{{row.companyFee||0.00}}</div>
            <div v-if="row.agent_id">代理酬劳：{{row.agentFee||0.00}}</div>
          </div>
          <div>
            <el-tag v-if="row.status == '0'" type="default">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '5'" type="default">{{row.statusTest}}</el-tag>
            <el-tag
              v-else-if="row.status == '10' && row.itemType == 1"
              type="warning"
            >{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '20'" type="warning">{{ row.statusTest }}</el-tag>

            <el-tag v-else-if="row.status == '25'" type="#66CCFF">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '30'" type="#66CCFF">{{ row.statusTest }}</el-tag>
            <el-tag
              v-else-if="row.status == '40'||(row.itemType == 2 && row.status == 10)"
              type="success"
            >{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '50'" type="error">{{ row.statusTest }}</el-tag>

            <el-tag v-else-if="row.status == '-1'" type="error">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '-10'" type="error">{{ row.statusTest }}</el-tag>
            <el-tag v-else-if="row.status == '-20'" type="error">{{ row.statusTest }}</el-tag>
            <!-- <el-tag v-else color="default">未知</el-tag> -->

            <el-tag v-if="row.status == 10 && row.is_busy">{{'请尽快指派'}}</el-tag>
            <el-tag v-if="row.status == 20 && row.is_busy">{{'请尽快上门'}}</el-tag>

            <el-tag v-if="row.payType == ''" type="default">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'yue'" type="warning">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'offline'" color="#66CCFF">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'weixin'" type="success">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'card'" type="warning">{{ row.payTypeDesc }}</el-tag>
            <el-tag v-else-if="row.payType == 'alipay'" color="blue">{{ row.payTypeDesc }}</el-tag>

            <!-- <el-tag v-else type="default">未知</el-tag> -->
          </div>
        </el-table-column>
        <!-- <el-table-column label="备注" min-width="120" #default="{row}">
          <div>客户备注：{{row.remark}}</div>
          <div>平台备注：{{row.remarkSaler}}</div>
        </el-table-column> -->
        <el-table-column label="时间" min-width="200" #default="{row}">
          <div>下单时间：{{row.addTimeDesc}}</div>
          <div v-if="row.status >= 0">支付时间：{{row.payTimeDesc}}</div>
          <div v-if="row.itemType == 1 && row.status >= 10">预约时间：{{row.bookTimeDesc}}</div>
          <template v-if="row.itemType == 1">
            <div v-if="row.status >= 20">指派时间：{{row.appointTimeDesc}}</div>
            <div v-if="row.status >=25">签到时间：{{ row.signTimeDesc }}</div>
            <div v-if="row.status >= 30 ">完成时间：{{row.handleTimeDesc}}</div>
          </template>
          <div v-if="row.status >= 40 ">结单时间：{{row.finishTimeDesc}}</div>
          <div v-if="row.status == -1">取消时间：{{row.cancelTimeDesc}}</div>
        </el-table-column>
        <el-table-column label="签到图片" min-width="100" #default="{row}">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.signImgsArray[0]"
            :preview-src-list="row.signImgsArray"
            v-if="row.signImgsArray.length > 0"
          ></el-image>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right" #default="{row}">
          <span v-if="row.status == 10">
            <el-button
              type="primary"
              @click="personnelDesignate(row)"
              size="small"
              icon="ios-people"
            >人员指派</el-button>
          </span>
          <el-divider direction="vertical" v-if="row.status == 10" />

          <!--已接单-->
          <span v-if="row.status == 20|| row.status == 30">
            <el-button
              type="primary"
              @click="accomplishOrder(row)"
              size="small"
              icon="md-checkmark-circle"
            >完成订单</el-button>
          </span>
          <!--退款申请-->
          <span v-if="row.status == -10">
            <el-button
              direction="primary"
              @click="orderRefund(row)"
              size="small"
              icon="md-cash"
            >处理退款</el-button>
          </span>
          <span v-if="row.status == -20">
            <el-button
              direction="primary"
              @click="orderRemark(row)"
              size="small"
              icon="md-cash"
            >退款详情</el-button>
          </span>
          <el-divider direction="vertical" v-if="[20,30,-10,-20].includes(row.status)" />
          <template>
            <el-dropdown @command="changeMenu(row, $event)">
              <span class="el-dropdown-link">
                更多
                <i type="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="10" v-show="row.status == 0 && row.status >=0">修改订单</el-dropdown-item>
                <el-dropdown-item command="20" v-show="row.status == 20">人员变更</el-dropdown-item>
                <el-dropdown-item command="30">订单详情</el-dropdown-item>
                <el-dropdown-item command="40">订单日志</el-dropdown-item>
                <el-dropdown-item command="50" v-show="row.status >= 0 && row.status !== 30">订单备注</el-dropdown-item>
                <el-dropdown-item
                  command="60"
                  v-show="row.status == 0 || (row.status < 40 && row.payType == 'card' && row.status > 0)"
                >取消订单</el-dropdown-item>
                <el-dropdown-item
                  command="70"
                  v-show="row.status < 40 && row.status >= 10 && row.payType != 'card'"
                >取消订单</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          show-elevator
          show-total
          :current-page="orderFrom.page"
          @current-change="pageChange"
          :page-size="orderFrom.limit"
        />
      </div>
    </el-card>
    <!-- 修改订单 -->
    <order-price
      v-if="priceModals"
      ref="price"
      :orderId="orderId"
      @submitOk="submitOk"
      @clearId="cancel"
    ></order-price>
    <!-- 订单详情 -->
    <el-dialog
      :visible.sync="detailModals"
      scrollable
      title="订单详情"
      class="order_box"
      width="80%"
      @close="cancel"
      :mask-closable="false"
    >
      <order-detail v-if="detailModals" ref="detail" :orderId="orderId" @submitOk="submitOk"></order-detail>
    </el-dialog>
    <!-- 人员指派 -->
    <order-designate
      v-if="designateModals"
      ref="designate"
      :orderId="orderId"
      @submitOk="submitOk"
      @clearId="cancel"
    ></order-designate>
    <!-- 取消订单 -->
    <order-cancel
      v-if="cancelModals"
      ref="cancel"
      :orderId="orderId"
      @submitOk="submitOk"
      @clearId="cancel"
    ></order-cancel>
    <!-- 退款处理 -->
    <order-refund
      v-if="refundModals"
      ref="refund"
      :orderId="orderId"
      @submitOk="submitOk"
      @clearId="cancel"
    ></order-refund>
    <!-- 订单日志 -->
    <order-log v-if="logModals" ref="log" :orderId="orderId" @submitOk="submitOk" @clearId="cancel"></order-log>
    <!-- 订单备注 -->
    <order-remark
      v-if="remarkModals"
      ref="remark"
      :orderId="orderId"
      @submitOk="submitOk"
      @clearId="cancel"
    ></order-remark>
    <el-drawer :closable="false" size="50%" label="rtl" :visible.sync="detailDrawModals" scrollable>
      <order-detail-drawer ref="details" v-if="detailDrawModals" :orderId="order_id"></order-detail-drawer>
    </el-drawer>
  </div>
</template>
  
  <script>
import {
  getOrderDataApi,
  orderList,
  accomplishOrderApi,
  exportOrder,
  getSecondCateListApi,
  getItemListApi,
  cancelBookOrderApi,
} from '@/api/onsite';
import orderPrice from './handle/orderPrice.vue';
import orderDetail from './handle/orderDetail.vue';
import orderDesignate from './handle/orderDesignate.vue';
import orderCancel from './handle/orderCancel.vue';
import orderRefund from './handle/orderRefund.vue';
import orderLog from './handle/orderLog.vue';
import orderRemark from './handle/orderRemark.vue';
import orderDetailDrawer from './handle/orderDetailDraw';
import orderTableExpand from './handle/orderTableExpand';

export default {
  name: 'service_order',
  components: {
    orderPrice,
    orderDetail,
    orderDesignate,
    orderCancel,
    orderRefund,
    orderLog,
    orderRemark,
    orderDetailDrawer,
    orderTableExpand,
  },
  data() {
    return {
      detailDrawModals: false,
      priceModals: false,
      detailModals: false,
      designateModals: false,
      cancelModals: false,
      refundModals: false,
      logModals: false,
      remarkModals: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      lock: false,
      spinShow: false,
      collapse: false,
      options: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)),
              );
              end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      orderFrom: {
        page: 1,
        limit: 15,
        status: 'all',
        keywords: '',
        fieldKey: 'all',
        payType: '',
        isPay: '',
        itemType: 'all',
        timeKey: '',
        cateId: 'all',
        itemId: 'all',
        time: '',
        ids: '',
      },
      payList: [
        { label: '全部', val: '' },
        { label: '余额支付', val: 'yue' },
        { label: '线下支付', val: 'offline' },
        { label: '微信支付', val: 'weixin' },
        { label: '次卡支付', val: 'card' },
      ],
      orderLists: [],
      tablists: {},
      timeVal: [],
      total: 0,
      itemList: [],
      cateList: [],
      tabs: [
        {
          type: 'all',
          label: '全部',
        },
        {
          type: '-1',
          label: '订单已取消',
        },
        {
          type: '0',
          label: '待支付',
        },
        {
          type: '5',
          label: '待预约',
        },
        {
          type: '10',
          label: '待接单',
        },
        {
          type: '20',
          label: '已接单',
        },
        {
          type: '25',
          label: '服务中',
        },
        {
          type: '30',
          label: '已完成',
        },
        {
          type: '40',
          label: '已结单',
        },
        {
          type: '50',
          label: '已过期',
        },
        {
          type: '-10',
          label: '退款申请',
        },
        {
          type: '-20',
          label: '已退款',
        },
      ],
      status_str: 'all',
      orderId: 0, // 当前订单id
      city_id: 0, // 当前城市id
      service_user_id: 0, // 当前员工id
      selectedIds: new Set(), //选中合并项的id:0
      ids: '',
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.query.status) {
        this.status_str = this.$route.query.status;
        this.orderFrom.status = this.status_str;
        this.getList();
      }
    },
  },
  created() {
    if (this.$route.query.status) {
      this.status_str = this.$route.query.status;
      this.orderFrom.status = this.status_str;
    }
    this.getCategory();
    this.getItems();
    this.getList();
  },
  mounted() {
    if (this.$route.query.status) {
      this.status_str = this.$route.query.status;
      this.orderFrom.status = this.status_str;
    }
    this.getTabs();
  },
  // beforeDestroy() {
  //   this.status_str = '';
  //   this.$refs.package.closeCammera();
  // },
  methods: {
    handleDbclick(row) {
      console.log(row, 'detail');
      this.order_id = row.id;
      this.detailDrawModals = true;
    },
    rowClassName(row) {
      if (row.is_busy) {
        return 'demo-table-error-row';
      }
      return '';
    },
    //导出
    exports() {
      
      this.orderFrom.ids = this.ids;
      exportOrder(this.orderFrom)
        .then((res) => {
          console.log(res);
          location.href = res.fileName;
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    // 重置
    reset(name) {
      (this.orderFrom = {
        page: 1,
        limit: 15,
        status: 'all',
        keywords: '',
        fieldKey: 'all',
        payType: '',
        isPay: '',
        timeKey: '',
        time: '',
        itemType: 'all',
        cateId: 'all',
        itemId: 'all',
      }),
        this.getList();
    },
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },
    // 选择日期
    onchangeTime(e) {
      this.timeVal = e;
      this.orderFrom.time = this.timeVal[0] ? this.timeVal.join('_') : '';
    },
    // 订单列表
    getList() {
      this.loading = true;
      orderList(this.orderFrom).then(async (res) => {
        let data = res;
        this.orderLists = data.list;
        this.total = data.total;
        this.loading = false;
      });
    },
    // 服务分类查询
    selectType(e) {
      console.log(this.orderFrom);
      this.orderFrom.page = 1;
      this.getList();
    },
    // 分页
    pageChange(index) {
      this.orderFrom.page = index;
      this.getList();
    },
    // 订单退款
    orderRefund(row) {
      this.orderId = row.id;
      this.refundModals = true;
      this.$nextTick((e) => {
        this.$refs.refund.modals = true;
        this.$refs.refund.is_remark = true;
        this.$refs.refund.getOrderInfo();
      });
    },
    // 退款详情
    orderRemark(row) {
      this.orderId = row.id;
      this.refundModals = true;

      this.$nextTick((e) => {
        this.$refs.refund.modals = true;
        this.$refs.refund.is_remark = false;
        this.$refs.refund.getOrderInfo();
      });
    },
    // 完成订单
    accomplishOrder(row) {
      let that = this;
      that.$confirm('确定订单完成吗？确认完成将无法恢复，请谨慎操作！', '确认完成').then(() => {
        if (that.send_locked) {
          return that.$message.error('请勿重复指派');
        }
        accomplishOrderApi({ orderId: row.id }).then((res) => {
          that.$message.success('操作成功');
          that.getList();
          that.getTabs();
        });
      });
    },
    // 人员指派
    personnelDesignate(row) {
      // alert(1)
      this.orderId = row.id;
      this.designateModals = true;
      this.$nextTick((e) => {
        this.$refs.designate.modals = true;
        this.$refs.designate.userOrderList();
      });
    },
    // 确认付款
    confirmPayOrder(row) {
      this.$refs.pay.modals = true;
      this.orderId = row.id;
      this.$nextTick((e) => {
        this.$refs.pay.getOrderInfo();
      });
    },
    // 订单详情
    orderDetail(row) {
      this.orderId = row.id;
      this.detailModals = true;
    },
    // 订单取消
    cancelOrder(row) {
      this.orderId = row.id;
      this.cancelModals = true;
      this.$nextTick((e) => {
        this.$refs.cancel.modals = true;
        this.$refs.cancel.getOrderInfo();
      });
    },
    // 修改订单
    priceOrder(row) {
      this.orderId = row.id;
      this.priceModals = true;
      this.$nextTick((e) => {
        this.$refs.price.modals = true;
        this.$refs.price.getOrderInfo();
      });
    },
    // 订单备注
    remarkOrder(row) {
      this.orderId = row.id;
      this.remarkModals = true;
      this.$nextTick((e) => {
        this.$refs.remark.modals = true;
        this.$refs.remark.getOrderInfo();
      });
    },
    // 订单日志
    orderLog(row) {
      this.logModals = true;
      this.orderId = row.id;
      this.$nextTick((e) => {
        this.$refs.log.modals = true;
        this.$refs.log.getOrderInfo();
        this.$refs.log.getOrderLog();
      });
    },
    //取消普通订单预约
    cancelBookOrder(row) {
      let that = this;
      let id = row.id;
      this.$confirm('确定要取消订单到待预约状态吗？', '确认取消订单').then(() => {
        cancelBookOrderApi({ id }).then((res) => {
          that.$message.success('处理成功');
          that.getList();
        });
      });
    },
    // 更多
    changeMenu(row, name) {
      this.orderId = row.id;
      switch (name) {
        case '10': // 修改订单
          this.priceOrder(row);
          break;
        case '20': // 人员变更
          this.personnelDesignate(row);
          break;
        case '30': //订单详情
          this.orderDetail(row);
          break;
        case '40': //订单日志
          this.orderLog(row);
          break;
        case '50': //订单备注
          this.remarkOrder(row);
          break;
        case '60': // 取消订单
          this.cancelOrder(row);
          break;
        case '70': //门店变更
          this.cancelBookOrder(row);
        default:
      }
    },
    cancel() {
      this.orderId = 0;
      this.priceModals = false;
      this.detailModals = false;
      this.cancelModals = false;
      this.logModals = false;
      this.designateModals = false;
      this.remarkModals = false;
    },
    getItems() {
      getItemListApi().then((res) => {
        let data = res;
        this.itemList = data.list;
      });
    },
    // 获取分类查询
    getCategory() {
      getSecondCateListApi().then(async (res) => {
        this.cateList = res;
      });
    },
    // tabs数据
    getTabs() {
      this.spinShow = true;
      getOrderDataApi()
        .then(async (res) => {
          this.tablists = res;
          this.spinShow = false;
        })
        .catch((res) => {
          this.spinShow = false;
          this.$message.error(res.msg);
        });
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
      this.orderFrom.status = tab.name;
      this.orderFrom.page = 1;
      this.getList();
      this.getTabs();
    },
    // 表格搜索
    orderSearchs() {
      this.orderFrom.status = this.status_str;
      this.orderFrom.page = 1;
      this.getList();
      this.getTabs();
    },
    //执行完成刷新
    submitOk() {
      this.getList();
      this.getTabs();
      this.cancel();
    },
    // 全选和取消全选时触发
    handleSelectAll(selection) {
      if (selection.length === 0) {
        //获取table的数据；
        let data = this.$refs.table.data;
        data.forEach((item) => {
          if (this.selectedIds.has(item.id)) {
            this.selectedIds.delete(item.id);
          }
        });
      } else {
        selection.forEach((item) => {
          this.selectedIds.add(item.id);
        });
      }
      this.$nextTick(() => {
        //确保dom加载完毕
        this.setChecked();
      });
    },
    // 选中某一行
    handleSelectRow(selection, row) {
      // console.log(selection,row,'handleSelectRow')
      if(selection){
        this.selectedIds.add(row.id);
      }
      else{
        this.selectedIds.delete(row.id);
      }
      this.$nextTick(() => {
        //确保dom加载完毕
        this.setChecked();
      });
    },
    setChecked() {
      //将new Set()转化为数组
      this.ids = [...this.selectedIds].join(',');
      // 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
      let objData = this.$refs.table.objData;
      for (let index in objData) {
        if (this.selectedIds.has(objData[index].id)) {
          objData[index]._isChecked = true;
        }
      }
    },
  },
};
</script>
  
  <style scoped lang="scss">
.ivu-select-dropdown.ivu-dropdown-transfer {
  background: #fff !important;
  width: 110px !important;
}
.tabBox_img {
  display: flex;
}

.ivu-table .demo-table-error-row td {
  /* background-color: red; */
  color: red;
}

.badge {
  & ::v-deep .el-badge__content.is-fixed {
    top: 10px;
    right: 8px;
  }
}
</style>
  